<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>全局注册</title>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <h3>在 Vue.js 3 中全局注册组件</h3>

        <div id="root">
            <p>在根组件中使用 button-counter 组件</p>
            <button-counter></button-counter>

            <wrapper></wrapper>
        </div>

        <script type="text/javascript">

            // 创建一个Vue应用
            const app = Vue.createApp( { } );

            // 1、定义组件
            const componentDefinition = {
                // 为组件指定模板
                template: `<button @click="handle"> 你点了我 {{ counter }} 次 </button>`,
                // 为组件指定 Data Property
                data(){
                    return {
                        counter: 0
                    }
                },
                // 为组件指定方法
                methods: {
                    handle(){
                        // 注意，这里的 this 表示当前组件
                        console.log( this );
                        this.counter++ ;
                    }
                }
            }

            // 2、注册组件 (在 Vue.js 3 中，通过 app 注册组件属于全局注册)
            // app.component( 组件名称 , 组件定义 );
            app.component( 'button-counter' , componentDefinition );

            // 注册组件
            app.component( 'wrapper' , {
                template: `<div style="border:1px solid blue ; margin : 15px auto ;">
                                <div>在非根组件中使用另一个组件(全局注册的组件)</div>
                                <button-counter></button-counter>
                           </div>`
            } );

            const vm = app.mount( "#root" );
            console.log( vm );
        </script>
        
    </body>
</html>